<template>
  <div style="height:100%;width:100%;padding:15px 20px">
    <div class="menu">
      <el-menu :default-active="defaultActive" class="el-menu-vertical" :router="true">
        <el-submenu
          :index="goDetail(classId,0,item.courseId)"
          v-for="(item ,index) in menuData"
          :key="item.courseId"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.courseName}}</span>
          </template>
          <el-menu-item :index="goDetail(classId,0,item.courseId)">总成绩</el-menu-item>
          <el-menu-item
            v-for="(page,order) in item.examPaperList"
            :index="goDetail(classId,page.examPaperId,item.courseId)"
            :key="''+item.courseId + '-' + page.examPaperId"
          >{{page.examPaperName}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { examClassCourseContent } from "@/api/exam";
export default {
  data() {
    return {
      classId: "",
      menuData: [],
      defaultActive: ""
    };
  },
  computed: {},
  methods: {
    getDefaultActive() {
      if (this.menuData.length) {
        this.$router.replace({
          path: this.goDetail(this.classId, 0, this.menuData[0].courseId)
        });

        this.defaultActive = this.goDetail(
          this.classId,
          0,
          this.menuData[0].courseId
        );
      } else {
        this.defaultActive = this.goDetail(this.classId, 0, "");
      }
    },
    examClassCourseContent() {
      examClassCourseContent({ classId: this.classId }).then(res => {
        if (res.code == 1) {
          this.menuData = res.response.courseContentList;
          this.getDefaultActive();
        }
      });
    },
    goDetail(classId, examPaperId, courseId) {
      return (
        "/manageTrainee/student/score/detail/" +
        examPaperId +
        "?examPaperId=" +
        examPaperId +
        "&courseId=" +
        courseId +
        "&classId=" +
        classId
      );
    }
  },
  created() {
    this.classId = this.$route.query.classId;
    this.getDefaultActive();
  },
  mounted() {
    this.examClassCourseContent();
  },
  watch: {
    $route(to, from) {
      this.defaultActive = to.fullPath;
      //监听路由是否变化
      if (
        to.path.indexOf("/manageTrainee/student/score/detail/") != -1 &&
        from.path == "/manageTrainee/student/score/detail"
      ) {
        this.$router.replace(
          this.goDetail(this.classId, 0, this.menuData[0].courseId)
        );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.menu {
  width: 210px;
  height: 100%;
  float: left;
}
.el-menu-vertical {
  height: 100%;
}
.content {
  margin-left: 210px;
  height: 100%;
}
</style>